import { RiAlertLine } from '@remixicon/react'
import { Button } from '@/library/gallery/components/Button'
import Dialog from '@/library/gallery/components/Dialog'
import { Space } from '@/library/gallery/components/Space'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { sleep } from '../button'
import Toast from '@/library/gallery/components/Toast'

export default (): React.ReactElement => (
  <>
    <DemoBlock title="基本用法">
      <Space direction="vertical" block>
        <Button
          block
          pattern="primary"
          onClick={() => {
            Dialog.alert({
              header: (
                <RiAlertLine
                  style={{
                    color: 'var(--rt-color-warning)',
                  }}
                />
              ),
              onConfirm: () => console.info('指令式 dialog 确认'),
              onClose: () => console.info('指令式 dialog close'),
              afterClose: () => console.info('指令式 dialog afterClose'),
              title: '注意',
              content: (
                <div>请用手机拍摄手持工牌照，注意保持照片清晰详情说明请查阅<a href="void:0">操作指引</a></div>
              ),
            })
          }}
        >
          点击弹出
        </Button>
      </Space>
    </DemoBlock>

    <DemoBlock title="等待 alert 完成, 获取点击结果">
      <Space direction="vertical" block>
        <Button
          block
          onClick={async () => {
            await Dialog.alert({
              content: 'alert 和 confirm 方法都会返回一个 Promise，你可以通过这个 Promise 实现等待弹窗关闭',
              onConfirm: async (action, index) => {
                await sleep(2000)
                console.info(action, index)
              },
            })
            Toast.show({ content: '已关闭', position: 'bottom' })
          }}
        >
          点击弹出
        </Button>
      </Space>
    </DemoBlock>
  </>
)
